<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>发布订阅模式</title>
    <style></style>
  </head>
  <body>
    <div>
      <p>发布订阅者模式(订阅者，发布者，信号中心)</p>
      <p>
        我们假设，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"(publish)一个信号，其他任务可以向信号中心'订阅'(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布订阅模式"
      </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      //Vue自定义事件
      let vm = new Vue();
      //click事件(注册多个，所以后面使用数组存储)，chnage事件
      //对象型式存储事件{click:[fn1,fn2],change:[fn1,fn2]}
      //注册事件
      //第一个参数为事件，第二个参数为回调函数
      vm.$on("dataChange", () => {
        console.log("dataChange");
      });
      vm.$on("dataChange", () => {
        console.log("dataChange2=1");
      });
      //触发事件
      vm.$emit("dataChange");


      // ================================
      //兄弟组件通信过程
      //eventBus.js
      //事件中心
      let eventHub = new Vue();

      //ComponentA.vue
      //发布者
      addToda:function(){
       //发布消息(事件)
       eventHub.$emit('add-todo',{text:this.newTodaText})
       this.newTodaText = ''
      }

      //ComponentB.Vue
      //订阅者
      created : function(){
        //订阅消息(事件)
        //第一个参数是事件，第二个参数是回调函数
        event.$on('add-toda',this.addTodo)
      }
    </script>
  </body>
</html>
